<template>
  <div class="details">
    <top-header :isLeft="true" title="商品详情"></top-header>
    <div class="toubu">
      <a-carousel autoplay>
        <div v-for="item in extra_pics" :key="item.ident">
          <img :src="getImage(item.url)" alt="" />
        </div>
      </a-carousel>
      <div class="data">
        <p>评分 <span>0</span></p>
        <p>
          月销 <span>{{ goods.goods.display_total_sales_volume }}</span>
        </p>
        <p>
          总销量 <span>{{ goods.goods.display_total_sales_volume }}</span>
        </p>
      </div>
      <hr />
    </div>
    <div class="xiangqing">
      <div class="content">
        <div class="name">
          <p>{{ goods.goods.foreword }}</p>
          <p class="title1">
            {{ goods.goods.name }}
          </p>
        </div>
        <div class="icon" @click="towork()">
          <i class="iconfont">&#xe90b; </i>
          <span>分享</span>
        </div>
      </div>
      <div class="address">
        <p class="shoujia"><span>￥</span>{{ goods.goods.display_price }}</p>
        <p>{{ goods.goods.display_freight }}</p>
      </div>
      <div class="service" @click="open1()">
        <p class="service-name">{{ goods.goods.kinds[0].name }}</p>
        <a-icon type="right" />
      </div>
      <div class="service2" @click="open()">
        <p class="service-name">· 七天无理由退货</p>
        <a-icon type="right" />
      </div>
      <div class="shuoming" v-show="show1 == 1">
        <div class="null" @click="close"></div>
        <div class="you">
          <button class="off" @click="close">X</button>
          <div>
            <p class="header">服务详情</p>
            <p class="header2">· 七天无理由退货</p>
            <p>
              本商品支持7天无理由退换货，需保证退回包装完好，商品及其标配配件、赠品、说明书、保修凭证均齐全。
            </p>
          </div>
        </div>
      </div>
      <div class="tab">
        <p @click="xiangqing()" :class="{ current_router: style_div == 1 }">
          详情
        </p>
        <p @click="guige()" :class="{ current_router: style_div == 2 }">规格</p>
      </div>
      <div
        v-for="i in goods.paras"
        :key="i.ident"
        class="imgs"
        v-show="showxiangqing == 1"
      >
        <img :src="getImage(i.url)" alt="" />
      </div>
      <div
        v-for="j in goods.goods.attrs"
        :key="j.index"
        class="guige"
        v-show="showguige == 1"
      >
        <p>
          {{ j.name }}:<span>{{ j.value }}</span>
        </p>
      </div>

      <div class="shangpin" v-show="show2 == 1">
        <div class="null" @click="close"></div>
        <div class="you2">
          <button class="off" @click="close">X</button>
          <div class="good">
            <div class="img1">
              <img :src="getImage(url + goods.goods.image.ident)" alt="" />
            </div>
            <div class="price">
              <p>
                ￥<span>{{ goodprice }}</span>
              </p>
              <p>
                已选：<span>{{ goodname }}</span>
              </p>
            </div>
          </div>
          <div class="goods">
            <div v-for="(k, index) in goods.goods.kinds" :key="index">
              <p
                @click="getmessage(k, index)"
                :class="[index == num1 ? 'current_router2' : '']"
              >
                {{ k.name }}
              </p>
            </div>
          </div>
          <div class="shuliang">
            <p>数量</p>
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </div>
          <div class="dibu" v-if="showbuy == 1">
            <div class="btn">
              <button class="button" @click="toshoppingcar()">
                加入购物车
              </button>
              <button class="button" @click="tobuy()">立即购买</button>
            </div>
          </div>
          <div v-else-if="showbuy == 2" class="queding">
            <button @click="toshoppingcar()">确定</button>
          </div>
          <div v-else class="queding">
            <button @click="tobuy()">确定</button>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="foot">
          <div class="font">
            <div class="store">
              <i class="iconfont">&#xeb53;</i>
              <p>店铺</p>
            </div>
            <div>
              <i class="iconfont">&#xe610;</i>
              <p>客服</p>
            </div>
            <div @click="$router.push({ name: 'ShoppingCar' })">
              <i class="iconfont">&#xe68a;</i>
              <p>购物车</p>
            </div>
          </div>
          <div class="btn2">
            <button class="button" @click="togouwuche()">加入购物车</button>
            <button class="button" @click="buy()">立即购买</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
import QS from "qs";
export default {
  components: { TopHeader },
  data() {
    return {
      style_div: 1,
      url: "https://i2.chuimg.com/",
      num: 1,
      nums: "",
      num1: "",
      // goods: "",
      showxiangqing: "",
      showguige: "",
      show1: "",
      show2: "",
      goodprice: "",
      goodimg: "",
      goodname: "",
      showbuy: "",
      // extra_pics:''
    };
  },
  created() {
    // this.getgoodcontent()
    this.getparams();
  },
  computed: {
    goods(){
      return this.$store.getters.goods;
    },
    extra_pics(){
      return this.$store.getters.goods.goods.extra_pics;
    }
    // console.log(this.extra_pics);
  },
  methods: {
      towork(){
      // this.extra_pics = JSON.stringify(this.extra_pics)
      // this.extra_pics = this.extra_pics[0].url
      // console.log(this.extra_pics)
      let params = {
        img:this.extra_pics[0].url,
        content:this.goods.goods.name,
        user_id:localStorage.id
      };
      this.$ajax.post('/mysql/share.php',QS.stringify(params)).then((res)=>{
        console.log(res)
        this.$router.push({name:'Home'})
      })
    },
    handleChange(value) {
      console.log(value);
    },
    open1() {
      this.goodprice = this.goods.goods.kinds[0].price;
      this.goodname = this.goods.goods.kinds[0].name;
      this.show2 = 1;
      this.showbuy = 1;
    },
    open() {
      this.show1 = 1;
    },
    close() {
      this.show1 = 0;
      this.show2 = 0;
    },

    xiangqing() {
      this.style_div = 1;
      this.showxiangqing = 1;
      this.showguige = 0;
    },
    guige() {
      this.style_div = 2;
      this.showxiangqing = 0;
      this.showguige = 1;
    },
    getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    getmessage(k, index = 0) {
      //  console.log(price)

      this.num1 = index;
      this.goodprice = k.price;
      this.goodname = k.name;
    },
    getparams() {
      this.showxiangqing = 1;
      this.showguige = 0;
    },
    togouwuche() {
      this.goodprice = this.goods.goods.kinds[0].price;
      this.goodname = this.goods.goods.kinds[0].name;
      // console.log(this.goods.goods.kinds[0].price)
      this.show2 = 1;
      this.showbuy = 2;
    },
    buy() {
      this.goodprice = this.goods.goods.kinds[0].price;
      this.goodname = this.goods.goods.kinds[0].name;
      this.show2 = 1;
      this.showbuy = 0;
    },
    toshoppingcar() {
      console.log(this.goodname);
      // console.log(this.goods.goods.shop.name)
      let params = {
        store: this.goods.goods.shop.name,
        title: this.goods.goods.name,
        goodname: this.goodname,
        goodimg: this.goods.goods.image.ident,
        goodprice: this.goodprice,
        num: this.num,
        type: 1,
        user_id:localStorage.id
      };
      this.$ajax.get("/mysql/shoppingselect.php",{
        params:{
          id:localStorage.id
        }
      }).then((res) => {
        console.log(res);
        if (res.data.length == 0) {
          this.$ajax
            .post("/mysql/shoppingcar.php", QS.stringify(params))
            .then((res) => {
              console.log(res);
              this.$message({
                message: "成功加入购物车",
                type: "success",
                // offset:50
              });
              this.show2 = 0
            });
        }
        if (res.data.length > 0) {
          this.$ajax.get('/mysql/shoppinggoodname.php',{
            params:{
              goodname:this.goodname
            }
          }).then((res)=>{
             var arr = res.data;
            if(res.data.length > 0){
              
               arr.some((i)=>{
  this.nums = +i.num + +this.num;
              let param = {
                num: this.nums,
                goodname: this.goodname,
              };
              this.$ajax
                .post("/mysql/shoppingModify.php", QS.stringify(param))
                .then((res) => {
                  console.log(res);
                  this.$message({
                    message: "成功加入购物车",
                    type: "success",
                    // offset:50
                  });
                  this.show2 = 0
                });
               })
            }else if(res.data.length==0){
   this.$ajax
                .post("/mysql/shoppingcar.php", QS.stringify(params))
                .then((res) => {
                  console.log(res);
                  this.$message({
                    message: "成功加入购物车",
                    type: "success",
                    // offset:50
                  });
                  this.show2 = 0
                });
            }
          }) 
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.toubu {
  margin-top: 70px;
  hr {
    margin: 10px 0 0;
  }
  .data {
    width: 372.5px;
    height: 40px;
    display: flex;
    justify-content: space-around;
    p {
      margin-bottom: 0;
      padding-top: 10px;
      font-size: 18px;
      text-align: center;
    }
    span {
      color: red;
    }
  }
  .banner {
    .ant-carousel /deep/ .slick-slide {
      text-align: center;
      height: 200px;
      overflow: hidden;
    }
  }
  img {
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
  }
}
.content {
  // margin: 10px 10px;
  display: flex;
  .name {
    width: 320px;
    height: 140px;
    .title1 {
      font-weight: bold;
      font-size: 20px;
    }
    p {
      // margin-bottom: 0;
      font-size: 18px;
      display: flex;
      flex-wrap: wrap;
      //    overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }
  }
  .icon {
    width: 30px;
    margin-left: 10px;
    margin-top: 30px;
    text-align: center;
    i {
      width: 40px;
      height: 50px;
      font-size: 24px;
    }
  }
}
.address {
  .shoujia {
    color: red;
  }
  height: 40px;
  display: flex;
  justify-content: space-between;
  p {
    font-size: 18px;
  }
}
.service {
  height: 2rem;
  background: rgb(202, 200, 200);
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    flex-grow: 1;
    margin: 0px;
    font-size: 1rem;
    color: $font-color;
    // margin-left: $common-margin;
    border-radius: $common-border-radius;
  }
}
.service2 {
  // height: 2rem;
  // background: gray;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    flex-grow: 1;
    margin: 0px;
    font-size: 10px;
    color: red;
    // margin-left: $common-margin;
    border-radius: $common-border-radius;
  }
}
.xiangqing {
  margin: 10px 10px;
}
.tab {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  p {
    margin-right: 20px;
  }
}
.imgs {
  width: 355px;
  img {
    width: 355px;
  }
}
.guige {
  span {
    margin-left: 10px;
  }
}
.current_router {
  color: red;
}
.current_router2 {
  color: red;
  // background: rgb(189, 14, 14);
}
.shuoming {
  z-index: 1000;
  height: 100%;
  width: 100%;
  margin-left: -10px;
  position: fixed;
  top: 60px;
  button {
    float: right;
    margin-top: 10px;
    margin-right: 5px;
    border-radius: 50%;
    border: 0;
    outline: none;
  }
  .null {
    background: rgba(0, 0, 0, 0.5);
    height: 60%;
  }
  .you {
    background: white;
    height: 40%;
    p {
      padding: 0 10px;
      margin: 0;
    }
    .header {
      padding-top: 10px;
      color: black;
      font-size: 16px;
    }
    .header2 {
      padding: 10px 10px;
      color: red;
    }
  }
}
.shangpin {
  z-index: 1000;
  height: 100%;
  width: 100%;
  margin-left: -10px;
  position: fixed;
  top: 60px;
  button {
    float: right;
    margin-top: 10px;
    margin-right: 5px;
    border-radius: 50%;
    border: 0;
    outline: none;
  }
  .null {
    background: rgba(0, 0, 0, 0.5);
    height: 30%;
  }
  .you2 {
    padding: 10px 10px 0;
    background: white;
    height: 70%;
    .good {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      .img1 {
        // width: 100px;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .price {
        margin-left: 20px;
        p {
          margin-bottom: 0;
        }
        p:first-child {
          color: red;
        }
      }
    }
    .goods {
      margin-bottom: 10px;
      height: 150px;
       overflow-y: scroll;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      p {
        // color: white;
        width: fit-content;
        background: rgb(202, 195, 195);
        margin: 10px 10px 10px 0;
        text-align: center;
        padding: $common-padding;
        box-sizing: border-box;
        list-style-type: none;
      }
    }
    .shuliang {
      display: flex;
      justify-content: space-between;
      p {
        font-size: 20px;
      }
    }
    .dibu {
      width: 100%;
      position: fixed;
      bottom: 10px;
    }
    .btn {
      // margin-top: 80px;
      display: flex;
      justify-content: space-between;

      button {
        color: white;
        border-radius: 0;
        width: 50%;
        height: 40px;
        background: rgb(221, 6, 6);
      }
      // .button{
      //     display: inline-block;
      // }
    }
    .queding {
      position: fixed;
      bottom: 10px;
      width: 100%;
      button {
        border-radius: 0;
        width: 100%;
        height: 40px;
        background: rgb(221, 6, 6);
      }
    }
  }
}
.footer {
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.foot {
  display: flex;
  justify-content: space-around;
  .font {
    width: 55%;
    display: flex;
    justify-content: space-around;
    div {
      text-align: center;
    }
    i {
      font-size: 20px;
    }
    p {
      margin-bottom: 0;
    }
  }
  .btn2 {
    width: 45%;
    margin-right: 10px;
    display: flex;
    justify-content: space-around;
    button {
      background: orangered;
      color: white;
      border: white;
    }
  }
}
</style>